<template>
  <ContentDetailWrap :title="t('inventory.detail')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <div class="w-full flex justify-between">
      <div class="w-95%">
        <el-descriptions
          border
          :column="1"
          label-align="left"
          content-align="left"
          class="mobile-descriptions"
        >
          <el-descriptions-item :span="24" :label="t('orderReturn.returnorder_no')">
            {{ descriptionsRow.returnorder_no }}
          </el-descriptions-item>
          <el-descriptions-item :span="24" :label="t('orderReturn.customer_id')">
            {{ descriptionsRow.customer_name }}
          </el-descriptions-item>
          <el-descriptions-item :span="24" :label="t('orderReturn.returnorder_type')">
            {{ useEnumeratePicker(returnorderTypeList, descriptionsRow.returnorder_type) }}
          </el-descriptions-item>
          <el-descriptions-item :span="24" :label="t('orderReturn.return_reason')">
            {{ useEnumeratePicker(reasonList, descriptionsRow.return_reason) }}
          </el-descriptions-item>
          <el-descriptions-item :span="24" :label="t('orderReturn.total_amount')">
            {{ descriptionsRow.total_amount }}
          </el-descriptions-item>
          <el-descriptions-item :span="24" :label="t('orderReturn.signatory')">
            {{ useEnumeratePicker(operatorList, descriptionsRow.signatory) }}
          </el-descriptions-item>
          <el-descriptions-item :span="24" :label="t('orderReturn.signing_date')">
            {{ descriptionsRow.signing_date }}
          </el-descriptions-item>
          <el-descriptions-item :span="24" :label="t('orderReturn.owner')">
            {{ useEnumeratePicker(operatorList, descriptionsRow.owner) }}
          </el-descriptions-item>
          <el-descriptions-item :span="24" :label="t('orderReturn.partner')">
            {{ useEnumeratePicker(operatorList, descriptionsRow.partner) }}
          </el-descriptions-item>
          <el-descriptions-item :span="24" :label="t('orderReturn.remark')">
            {{ descriptionsRow.remark || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :span="24" label="附件">
            <PreviewComponent
              v-if="descriptionsRow.attachfiles"
              :file-list="
                Array.isArray(descriptionsRow.attachfiles)
                  ? descriptionsRow.attachfiles
                  : [descriptionsRow.attachfiles]
              "
            />
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item :span="24" label="退款地址">
            {{ descriptionsRow.payment_address || '-' }}
          </el-descriptions-item>
        </el-descriptions>

        <!--    商品 title-->
        <div class="my-20px">
          <span class="font-weight-bold">{{ t('orderReturn.shop') }}</span>
        </div>
        <!-- 商品列表 -->
        <el-table
          :data="tableShopList"
          highlight-current-row
          stripe
          border
          v-loading="tableLoading"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('orderReturn.product_name')"
            prop="product_name"
            min-width="180"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('orderReturn.warehouses_name')"
            prop="warehouses_name"
            min-width="180"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('orderReturn.return_quantity')"
            prop="return_quantity"
            min-width="180"
            :show-overflow-tooltip="true"
          />
        </el-table>
        <!--    支付 title-->
        <div class="my-20px">
          <span class="font-weight-bold">{{ t('orderReturn.paymentInformation') }}</span>
        </div>
        <!-- 支付信息列表 -->
        <el-table
          :data="tablePaymentList"
          highlight-current-row
          stripe
          border
          v-loading="tableLoading"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('orderReturn.paid_amount')"
            min-width="250"
            :show-overflow-tooltip="true"
            prop="paid_amount"
          />
          <el-table-column
            label="应退金额"
            min-width="250"
            :show-overflow-tooltip="true"
            prop="pay_amount"
          />
          <el-table-column
            :label="t('orderReturn.payment_method_name')"
            min-width="250"
            :show-overflow-tooltip="true"
            prop="payment_method_name"
          />
          <el-table-column
            :label="t('orderReturn.pay_time')"
            prop="pay_time"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('orderReturn.proofOfTransfer')"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              <PreviewComponent
                v-if="row.transfer_voucher_url"
                :file-list="
                  Array.isArray(row.transfer_voucher_url)
                    ? row.transfer_voucher_url
                    : [row.transfer_voucher_url]
                "
              />
            </template>
          </el-table-column>

          <el-table-column
            :label="t('orderReturn.paymentStatus')"
            min-width="250"
            :show-overflow-tooltip="true"
            prop="status_name"
          />
          <el-table-column
            :label="t('orderReturn.reviewTime')"
            prop="reviewer_time"
            min-width="250"
            :show-overflow-tooltip="true"
          />
        </el-table>
        <!-- 流程记录 -->
        <div class="my-20px">
          <el-card shadow="always">
            <div @click="toggleOperateRecord" class="operate-record-header cursor-pointer">
              <span>{{ t('order.operateRecord') }}</span>
              <el-icon v-if="isOperateRecordExpanded">
                <el-icon-arrow-down />
              </el-icon>
              <el-icon v-else>
                <el-icon-arrow-right />
              </el-icon>
            </div>
            <el-collapse-transition>
              <div v-show="isOperateRecordExpanded" class="w-full">
                <el-timeline class="timeline" v-if="operateRecordList.length">
                  <el-timeline-item
                    class="w-100%"
                    v-for="(group, index) in operateRecordList"
                    :key="index"
                    type="primary"
                  >
                    <template #default>
                      <div class="timeline-group">
                        <div class="timeline-date">
                          <el-button type="text">
                            {{ group.operate }}
                          </el-button>
                        </div>
                        <div>
                          <el-card shadow="always" class="record-card">
                            <div class="card-body operate">
                              <div>
                                <div>
                                  <span class="operate-name mr-8px">{{ group.content }}</span>
                                </div>
                                <div class="mt-6px">
                                  <span class="mr-8px">{{ group.user_name }}</span>
                                  <span class="mr-8px">{{ group.create_time }}</span>
                                </div>
                                <div class="mt-6px" v-if="group.order_type || group.order_no">
                                  <span v-if="group.order_type" class="mr-8px">{{
                                    group.order_type
                                  }}</span>
                                  <span v-if="group.order_no" class="mr-8px">{{
                                    group.order_no
                                  }}</span>
                                </div>
                              </div>
                            </div>
                          </el-card>
                        </div>
                      </div>
                    </template>
                  </el-timeline-item>
                </el-timeline>
                <el-empty v-else :image-size="100" description="暂无数据" />
              </div>
            </el-collapse-transition>
          </el-card>
        </div>
      </div>
    </div>
  </ContentDetailWrap>
</template>
<script setup lang="tsx">
import PreviewComponent from '@/components/Preview/index.vue'
// import TimeLine from './components/TimeLine/index.vue'
import DialogAudit from './components/DialogAudit/index.vue'
import { Descriptions, type DescriptionsSchema } from '@/components/Descriptions'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { getDetailApi, getEnumApi, orderReturnOperateRecordsApi } from '@/api/orderReturn'
import { useEnumeratePicker } from '@/utils'
import { getPayEnumApi } from '@/api/order/pay'

const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const DialogAuditRef = ref<InstanceType<typeof DialogAudit>>()

const tableLoading = ref<boolean>(false)

const tablePaymentList = ref<any[]>([])
const tableShopList = ref<any[]>([])
const tableOrderList = ref<any[]>([])

const timeLineList = ref<any[]>([])

const operatorList = ref<Array<Record<string, any>>>([])
const reasonList = ref<Array<Record<string, any>>>([])
const returnorderTypeList = ref<Array<Record<string, any>>>([])
const orderTypeList = ref<Array<Record<string, any>>>([])
const statusList = ref<Array<Record<string, any>>>([])

const descriptionsRow = ref<Record<string, any>>({})
// 操作记录
const operateRecordList = ref<any[]>([])
const isOperateRecordExpanded = ref(true)
const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'returnorder_no',
    label: t('orderReturn.returnorder_no')
  },
  {
    field: 'returnorder_type',
    label: t('orderReturn.returnorder_type'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(returnorderTypeList.value, data.returnorder_type)}</span>
      }
    }
  },
  {
    field: 'customer_name',
    label: t('orderReturn.customer_id')
  },
  {
    field: 'order_no',
    label: t('orderReturn.order_id')
  },
  // {
  //   field: 'order_type',
  //   label: t('orderReturn.order_type'),
  //   slots: {
  //     default: (data: Record<string, any>) => {
  //       return <span>{useEnumeratePicker(orderTypeList.value, data.order_type)}</span>
  //     }
  //   }
  // },
  {
    field: 'signatory',
    label: t('orderReturn.signatory'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(operatorList.value, data.signatory)}</span>
      }
    }
  },
  {
    field: 'signing_date',
    label: t('orderReturn.signing_date')
  },
  {
    field: 'owner',
    label: t('orderReturn.owner'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(operatorList.value, data.owner)}</span>
      }
    }
  },
  {
    field: 'partner_value',
    label: t('orderReturn.partner')
  },
  {
    field: 'total_amount',
    label: t('orderReturn.total_amount')
  },
  {
    field: 'paid_amount',
    label: t('orderReturn.paid_amount')
  },
  {
    field: 'status',
    label: t('orderReturn.status'),
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(statusList.value, data.status)}</span>
      }
    }
  },
  {
    field: 'return_reason',
    label: t('orderReturn.return_reason'),
    span: 24,
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(reasonList.value, data.return_reason)}</span>
      }
    }
  },
  {
    field: 'remark',
    label: t('orderReturn.remark'),
    span: 24
  },
  // {
  //   field: 'return_status',
  //   label: t('orderReturn.return_status'),
  //   slots: {
  //     default: (data: Record<string, any>) => {
  //       return <span>{useEnumeratePicker(reasonList.value, data.return_reason)}</span>
  //     }
  //   }
  // },
  {
    field: 'create_time',
    label: '创建时间'
  },
  {
    field: 'creator',
    label: '创建人',
    slots: {
      default: (data: Record<string, any>) => {
        return <span>{useEnumeratePicker(operatorList.value, data.creator)}</span>
      }
    }
  },
  {
    field: 'update_time',
    label: '修改时间'
  }
])

//打开支付信息审核弹框
const handleAudit = (row: Record<string, any>) => {
  nextTick(() => {
    DialogAuditRef.value!.dialogVisible = true
    DialogAuditRef.value?.getBackShow(JSON.parse(JSON.stringify(row)))
  })
}

//跳转详情
const handleDetail = (row: Record<string, any>) => {
  push({
    path: `/order/order-management/detail`,
    query: { data: encodeURIComponent(JSON.stringify(row)) }
  })
}

//获取枚举
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'all' })
  orderTypeList.value = resp.data.order_type
  operatorList.value = resp.data.operator
  reasonList.value = resp.data.return_reason
  returnorderTypeList.value = resp.data.returnorder_type
  statusList.value = resp.data.status
}

const getDetail = async () => {
  const resp = await getDetailApi(query.id as string)
  descriptionsRow.value = resp.data
  tablePaymentList.value = resp.data.payment_list
  tableShopList.value = resp.data.products_list
  tableOrderList.value = resp.data.order_list
  timeLineList.value = resp.data.logger
}

// 获取操作记录
const getOperateRecords = async () => {
  try {
    const res = await orderReturnOperateRecordsApi({
      returnorder_id: descriptionsRow.value.id
    })
    operateRecordList.value = res.data?.list || []
  } catch (e) {
    operateRecordList.value = []
  }
}

const toggleOperateRecord = () => {
  isOperateRecordExpanded.value = !isOperateRecordExpanded.value
}

onMounted(async () => {
  await getDropDownBoxInfo()
  await getDetail()
  await getOperateRecords()
})
</script>
<style lang="less" scoped>
// 操作记录样式
.operate-record-header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}

.timeline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 20px;
}

.timeline-group {
  display: flex;
  flex-direction: column;
}

.timeline-date {
  margin-top: -5px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.operate-name {
  font-weight: bold;
  color: #000;
}

.operate {
  color: #999;
}

// 移动端样式
.mobile-container {
  @media (width <= 768px) {
    .mobile-descriptions {
      margin-bottom: 30px;
    }
  }
}

// 按照BaseInfo/index.vue的样式设置
:deep(.is-bordered-label) {
  width: 200px;
}

.mobile-card {
  .product-card,
  .payment-card {
    .el-card__body {
      padding: 16px;

      .card-content {
        .info-row {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 12px;
          line-height: 1.5;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            min-width: 90px;
            margin-right: 8px;
            font-weight: 500;
            color: #666;
            flex-shrink: 0;
          }

          .value {
            line-height: 1.4;
            color: #333;
            text-align: right;
            word-break: break-all;
            flex: 1;
          }
        }
      }
    }
  }

  .el-card__header {
    padding: 12px 16px;

    .card-header {
      display: flex;
      font-size: 14px;
      font-weight: 600;
      justify-content: space-between;
      align-items: center;

      .el-link {
        font-size: 14px;
        font-weight: 600;
      }

      .el-tag {
        font-size: 12px;
      }
    }
  }

  .card-actions {
    display: flex;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f0f0f0;
    flex-direction: column;
    gap: 8px;

    .action-btn {
      width: 100%;
      height: 40px;
      margin-bottom: 8px;
      font-size: 14px;
      border-radius: 6px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// 移动端按钮组样式
.mobile-button-group {
  &.horizontal {
    display: flex;
    gap: 8px;

    .el-button {
      flex: 1;
      min-width: 0;
    }
  }
}
</style>
